<template>
  <div>
    <content-header title="众筹活动"></content-header>
    <!-- 投票入口 -->
    <div class="xui-padding-xs xui-margin-top-xs " v-if="hasVoting && votingDetail" >
      <router-link class="voting-box" :to="{name:'Winchance-vote-detail',params:{id:votingDetail.id}}" style="display:block">
        <img-box :imgSrc="votingDetail.imgUrl" width="917" height="260"></img-box>
        <span class="voting-mark"></span>
        <span class="vote-btn"></span>
      </router-link>
    </div>

    <!-- 创意征集活动列表 -->
    <div class="xui-grid-avg-2 xui-padding-horizontal-children-sm xui-margin-top">
      <div class="xui-margin-bottom" v-for="(item,index) in actList" :key="index">
        <router-link :to="`${routePath}/detail/${item.id}`">
          <div class="creative-act-card">
            <img-box :imgSrc="item.imgUrl" width="100%" height="230"></img-box>
            <div class="card-body">
              <h3 class="xui-text-truncate">{{item.title}}</h3>
              <div class="xui-fc">
                <span class="xui-fl color-gray">{{item.stStartTime}} ~ {{item.stEndTime}}</span>
                <span class="xui-fr color-gray"> <i class="iconfont icon-eye"></i> {{item.browsNum}}</span>
              </div>
            </div>
          </div>
        </router-link>
      </div>
    </div>

    <el-pagination
      background
      v-if="page.count"
      layout="prev, pager, next"
      :total="page.count"
      class="xui-margin-top xui-text-center"
      :current-page.sync="page.index"
      :page-size="page.size"
      @current-change="handlePage">
    </el-pagination>
  </div>
</template>

<script>
import contentHeader from "@/components/widge/content-header";
import imgBox from "@/components/widge/img-box";
import pic from "@/assets/images/example/zhongchou.png";
import votingMark from "@/assets/images/Winchance/voting.png";
import { getActList } from "@/api/list";
import { getVoteList } from "@/api/vote";
import { addBrowseNum } from "@/api/detail";
import { parseTime } from "@/utils";

export default {
  data() {
    return {
      pic,
      votingMark,
      actList: [],
      votingDetail: {
        imgUrl: "",
        id: null
      },
      hasVoting: false,
      page: {
        index: 1,
        count: null,
        size: 8
      }
    };
  },
  components: {
    contentHeader,
    imgBox
  },
  computed: {
    routePath() {
      return this.$route.path;
    },
    needLogin() {
      return this.$store.state.user.OPEN_DIALOG_NEED_LOGIN;
    }
  },
  methods: {
    getActList() {
      getActList(this.page.index, this.page.size).then(res => {
        this.page.count = res.data.count;
        this.actList = res.data.recordsList;
      });
    },
    handlePage() {
      this.getActList();
    }
  },
  mounted() {
    this.getActList();
    getVoteList().then(res => {
      if (res.data.recordsList.length == 0) {
        return false;
      }
      if (res.data.recordsList) this.hasVoting = true;
      let votingList = res.data.recordsList.filter(item => {
        var curTime = Date.parse(new Date());
        var startTime = item.startTime;
        var endTime = item.endTime;
        return curTime >= startTime && curTime <= endTime;
      });
      this.votingDetail = votingList.length > 0 ? votingList[0] : false;
    });
  },
  filters: {
    parseTime(time, cFormat) {
      console.log(time);
      let arr = time.split("-");
      let d = new Date();
      d.setFullYear(Number(arr[0]), Number(arr[1] - 1), Number(arr[2]));
      return parseTime(time, cFormat);
    }
  }
};
</script>

<style lang="less" scoped>
.voting-box {
  position: relative;
}
.voting-mark {
  position: absolute;
  top: 20px;
  width: 140px;
  height: 100px;
  display: block;
  background: url("../../../assets/images/Winchance/voting.png") no-repeat left
    top;
}
.vote-btn {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 114px;
  height: 35px;
  background: url("../../../assets/images/Winchance/voting-btn.png") no-repeat
    center;
}

.xui-grid-avg-2.xui-padding-horizontal-children-sm {
  margin-left: -5px;
  margin-right: -5px;
}
.creative-act-card {
  border: 1px solid #d2d2d2;
  transition: border-color 0.25s;

  .card-body {
    padding: 10px 15px;
    h3 {
      font-size: 17px;
      margin-bottom: 4px;
    }
  }
}
.creative-act-card:hover {
  border-color: #bf9c51;
}
</style>

